<template>
  <div class="hello">
    <div v-if = 'showState' class='hello-img-box'>
        <img class='hello-img' src='../assets/img/splash.png'>
    </div>
    <div v-if = '!showState' class='login'>
      <div class = 'login-box'>
          <div class = 'login-title-box'>
              <p class = 'login-title-big'>
                <img src='../assets/img/logo-big-title.png'/>
              </p>
              <p class = 'login-title-small'>
                <img src='../assets/img/logo-samll-title.png'/>
              </p>
          </div>
          <div class = 'login-info-box'>
              <p class='login-info-name'>
                  <input class = 'login-name' type = 'text' placeholder = '请输入手机号码'/> 
              </p>
              <p class='login-info-pass'>
                  <input class = 'login-pass' type = 'text' placeholder = '请输入密码'/>
              </p>
              <p class = 'login-forget-pass'>
                <router-link to='/Forgetpass' class='ForGerPass'>忘记密码？</router-link>
              </p>
          </div>
          <div class = 'login-buttons'>
              <p class = 'login-button-login' @click='login'>
              	<router-link to='/home'>登录</router-link>
              </p>
              <p class = 'login-button-reg'>
                <router-link to='/Register'>注册</router-link>
              </p>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
  data () {
    return {
      showState:true
    }
  },
  methods:{
    showStu(){
      setTimeout(() => {
          this.showState=false;
      }, 3000)
    },
    login(){
    	this.$http.post('/merchant/login/login',{phone:'15608227259',password:'2'},{emulateJSON:true}).then(function(res){
                            alert(res.body);    
                        },function(res){
                            console.log(res.status);
                        });
    }
  },
  created:function(){
    this.showStu();
  }
}
</script>

<style scoped>
  .hello{
    height:100vh;
    width:100vw;
  }
  .hello-img,.hello-img-box{
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
    overflow:hidden;
  }
  .login{
    background-color:#71B4EB;
    height:100vh;
    width:100vw;
    color:white;
    position:relative;
  }
  .login-box{
    height:50%;
    width:65%;
    text-align:center;
    position:absolute;
    top:50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  .login-title-box{
    margin-bottom:60px;
    text-align:center;
  }
  .login-info-box > p{
    margin:0px auto;
  }
  .login-title-big{
    text-align:center;
  }
  .login-title-small > img,.login-title-big > img{
    width:80px;
  }
  .login-title-small{
    text-align:center;
  }
  .login-name,.login-pass{
    height:30px;
    width:100%;
    outline:none;
    border:1px #cccccc solid;
    border-radius:4px;
    line-height:30px;
    padding-left:5px;

  }
  .login-info-name{
    width:100%;
    text-align:center;
  }
  .login-info-pass{
    margin-top:30px !important;
    width:100%;
  }
  .login-forget-pass{
    font-size:.8rem;
    text-align:right;
    width:100%;
    margin:10px !important;
  }
  .login-button-login,.login-button-reg{
    display:inline-block;
    width:42%;
    border-radius:4px;
    height:30px;
    line-height:30px;
  }
  .login-button-login{
    background:#EADA28;
    margin-right:6%;
  }
  .login-button-reg{
    background:#2991E2;
    margin-left:6%;
  }
  .ForGerPass{
    color:white;
  }

</style>
